import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useTranslation } from 'react-i18next'
import { RootState, add, AppDispatch } from '../redux/store'
import { countAsync } from '../redux/slice'
import { useAppDispatch, useAppSelector } from '../redux/hooks'
export default function Count() {
  const { t, i18n } = useTranslation(['count'])
  //   const count = useSelector(
  //     (state: {
  //       c: {
  //         count: number
  //       }
  //     }) => {
  //       return state.c.count
  //     }
  //   )
  //   const count = useSelector((state: RootState) => {
  //     return state.c.count
  //   })
  const count = useAppSelector((state) => {
    return state.c.count
  })

  //   const dispatch = useDispatch<AppDispatch>()
  const dispatch = useAppDispatch()
  return (
    <div>
      <h1>{t('count')}:</h1>
      <p>{count}</p>
      <button
        onClick={() => {
          dispatch(add(2))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(countAsync())
        }}
      >
        +async
      </button>
    </div>
  )
}
